<template>
  <!-- 首页主内容区 -->
  <div class="dashboard-home">
    <!-- 欢迎区 -->
    <div class="welcome-section">
      <div class="welcome-left">
        <img src="../../img/Logo.png" alt="logo" class="logo" />
        <div>
          <h2>欢迎来到后台管理系统</h2>
          <p>高效、智能、可视化的管理平台</p>
        </div>
      </div>
      <div class="welcome-right">
        <el-tag type="primary" effect="dark">今日访问量：{{ stats.visits }}</el-tag>
        <el-tag type="success" effect="dark">活跃用户：{{ stats.users }}</el-tag>
        <el-tag type="warning" effect="dark">待处理事项：{{ stats.todos }}</el-tag>
      </div>
    </div>

    <!-- 统计卡片区 -->
    <div class="stats-section">
      <el-card class="stat-card" shadow="hover">
        <el-icon>
          <User />
        </el-icon>
        <div class="stat-info">
          <div class="stat-title">用户总数</div>
          <div class="stat-value">{{ stats.users }}</div>
        </div>
      </el-card>
      <el-card class="stat-card" shadow="hover">
        <el-icon>
          <Document />
        </el-icon>
        <div class="stat-info">
          <div class="stat-title">文章数量</div>
          <div class="stat-value">{{ stats.articles }}</div>
        </div>
      </el-card>
      <el-card class="stat-card" shadow="hover">
        <el-icon>
          <Folder />
        </el-icon>
        <div class="stat-info">
          <div class="stat-title">文件数</div>
          <div class="stat-value">{{ stats.files }}</div>
        </div>
      </el-card>
      <el-card class="stat-card" shadow="hover">
        <el-icon>
          <MessageBox />
        </el-icon>
        <div class="stat-info">
          <div class="stat-title">日志统计</div>
          <div class="stat-value">{{ stats.logs }}</div>
        </div>
      </el-card>
    </div>

    <!-- 柱状图区 -->
    <div class="chart-section">
      <el-card shadow="hover">
        <div class="chart-title">近一周访问量统计</div>
        <v-chart :option="barOption" autoresize style="height: 320px;" />
      </el-card>
    </div>

    <!-- 快捷图标区 -->
    <div class="quick-section">
      <el-card class="quick-card" shadow="hover" v-for="item in quicks" :key="item.title" @click="go(item.path)">
        <el-icon :size="32">
          <component :is="item.icon" />
        </el-icon>
        <div class="quick-title">{{ item.title }}</div>
      </el-card>
    </div>
    <!-- 待办事项区 -->
    <div class="todo-section">
      <el-card shadow="hover">
        <div class="todo-title">待办事项</div>
        <div class="todo-tabs">
          <el-button :type="todoTab === 'all' ? 'primary' : 'default'" @click="setTab('all')">全部</el-button>
          <el-button :type="todoTab === 'undone' ? 'success' : 'default'" @click="setTab('undone')"
            style="margin-left:8px;">未完成</el-button>
          <el-button :type="todoTab === 'done' ? 'info' : 'default'" @click="setTab('done')"
            style="margin-left:8px;">已完成</el-button>
        </div>
        <div class="todo-input">
          <el-input v-model="newTodo" placeholder="添加新待办..." @keyup.enter="addTodo" clearable style="width: 220px;" />
          <el-button type="primary" @click="addTodo" style="margin-left: 8px;">添加</el-button>
        </div>
        <el-divider />
        <div v-if="filteredTodos.length === 0" class="todo-empty">暂无待办事项</div>
        <div v-else class="todo-list">
          <div v-for="(todo, idx) in filteredTodos" :key="idx" class="todo-item">
            <el-checkbox :model-value="todo.done" @change="() => toggleTodoById(todo.id)"></el-checkbox>
            <span class="todo-text" :class="{ done: todo.done }">{{ todo.text }}</span>
            <el-tag v-if="todo.done" type="info" size="small" style="margin-left:8px;">已完成</el-tag>
            <el-tag v-else type="success" size="small" style="margin-left:8px;">未完成</el-tag>
            <el-button type="danger" size="small" icon="Delete" circle @click="() => removeTodoById(todo.id)"
              style="margin-left: auto;" />
          </div>
        </div>
      </el-card>
    </div>

  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { useRouter } from 'vue-router'
import { User, Document, Folder, Edit, Avatar,MessageBox } from '@element-plus/icons-vue'
import VChart from 'vue-echarts'

const router = useRouter()

// 统计数据
const stats = ref({
  visits: 1280,
  users: 256,
  todos: 7,
  articles: 42,
  files: 18,
  logs: 12
})

// 柱状图配置
const barOption = ref({
  color: {
        type: 'linear',
        x: 0, y: 0,
        x2: -1, y2: 1,   // 135° 方向
        colorStops: [
          { offset: 0, color: '#c4d9e2' },
          { offset: 0.5, color: '#71a4b9' },
          { offset: 1, color: '#426a7c' }
        ]
      },
  tooltip: { trigger: 'axis' },
  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    axisTick: { alignWithLabel: true }
  },
  yAxis: { type: 'value' },
  series: [
    {
      name: '访问量',
      type: 'bar',
      barWidth: '50%',
      data: [220, 182, 191, 234, 290, 330, 310]
    }
  ]
})

// 快捷入口
const quicks = [
  { title: '用户管理', icon: User, path: '/system/user/userlist' },
  { title: '文章管理', icon: Edit, path: '/content/articlelist' },
  { title: '文件管理', icon: Folder, path: '/file/filelist' },
  { title: '日志管理', icon: MessageBox, path: '/log/loglist' },
  { title: '个人中心', icon: Avatar, path: '/profile/profileview' }
]

const go = (path) => {
  router.push(path)
}
// 待办事项
import { nanoid } from 'nanoid'
const todos = reactive([
  { id: nanoid(), text: '完善个人信息', done: false },
  { id: nanoid(), text: '审核新用户申请', done: false },
  { id: nanoid(), text: '备份数据库', done: false }
])
const newTodo = ref('')
const todoTab = ref('all') // all/undone/done
const setTab = (tab) => {
  todoTab.value = tab
}
const filteredTodos = computed(() => {
  if (todoTab.value === 'all') return todos
  if (todoTab.value === 'undone') return todos.filter(t => !t.done)
  if (todoTab.value === 'done') return todos.filter(t => t.done)
  return todos
})
const addTodo = () => {
  if (newTodo.value.trim()) {
    todos.push({ id: nanoid(), text: newTodo.value.trim(), done: false })
    newTodo.value = ''
  }
}
const toggleTodoById = id => {
  const todo = todos.find(t => t.id === id)
  if (todo) todo.done = !todo.done
}
const removeTodoById = id => {
  const idx = todos.findIndex(t => t.id === id)
  if (idx > -1) todos.splice(idx, 1)
}
// stats.todos 联动
stats.value = stats.value || {}
stats.value.todos = computed(() => todos.filter(t => !t.done).length)
</script>

<style scoped>
.dashboard-home {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 10px 0;
}

.welcome-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(
    135deg,
    #e6f1f5 0%,
    #71a4b9 35%,
    #2093a2 70%,
    #005a6b 100%
  );
  border-radius: 12px;
  padding: 24px 32px;
  box-shadow: 0 2px 8px rgba(58, 91, 160, 0.10);
}

.welcome-left {
  display: flex;
  align-items: center;
  gap: 18px;
}

.logo {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(58, 91, 160, 0.10);
}

.welcome-left h2 {
  margin: 0;
  color: #076677;
  font-size: 24px;
  font-weight: bold;
}

.welcome-left p {
  margin: 4px 0 0 0;
  color: #539eb1;
  font-size: 15px;
}

.welcome-right {
  display: flex;
  gap: 16px;
}

.stats-section {
  display: flex;
  gap: 24px;
}

.stat-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 180px;
  cursor: pointer;
  transition: box-shadow 0.3s;
}

.stat-card:hover {
  box-shadow: 0 4px 16px rgba(58, 91, 160, 0.18);
}

.stat-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-title {
  color: #2451a6;
  font-size: 15px;
}

.stat-value {
  color: #3998a9;
  font-size: 22px;
  font-weight: bold;
}

.chart-section {
  margin-top: 8px;
}

.chart-title {
  font-size: 16px;
  color: #3998a9;
  font-weight: bold;
  margin-bottom: 12px;
}

.quick-section {
  display: flex;
  gap: 24px;
  margin-top: 8px;
}

.quick-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 120px;
  height: 110px;
  cursor: pointer;
  transition: box-shadow 0.3s, background 0.3s;
}

.quick-card:hover {
  background: linear-gradient(90deg, #c4d9e2 0%, #71a4b9 50%, #426a7c 100%);
  color: #fff;
  box-shadow: 0 4px 16px rgba(58, 91, 160, 0.18);

}

.quick-title {
  font-size: 15px;
  font-weight: 500;
}

/* 待办事项 */
.todo-section {
  margin-top: 16px;
}

.todo-tabs {
  margin-bottom: 8px;
}

.todo-stats {
  margin-bottom: 8px;
}

.todo-title {
  font-size: 16px;
  color: #3998a9;
  font-weight: bold;
  margin-bottom: 8px;
}

.todo-input {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.todo-empty {
  color: #999;
  text-align: center;
  padding: 24px 0;
}

.todo-list {
  padding: 4px 0;
}

.todo-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid #f0f0f0;
}

.todo-item:last-child {
  border-bottom: none;
}

.todo-text {
  font-size: 15px;
  color: #7b8a8a;
  flex: 1;
}

.todo-text.done {
  text-decoration: line-through;
  color: #aaa;
}
</style>
